<template>
  <view class="page" :style="'background-color:#f5f5f5;background-image: url('+bgPic+');min-height:'+windowHeight+'px;'"
  >
    <view :style="colorStyle">
      <view class="index skeleton" :style="{visibility: showSkeleton ? 'hidden' : 'visible'}">
        <headerSerch :dataConfig="headerSerchConfig"></headerSerch>
        <swiperBg :swiperImgList="swiperImgList"></swiperBg>
        <menus :dataConfig="menusConfig" :menuListData="menuList"></menus>
        <activeParty :dataConfig="activePartyConfig" ></activeParty>
        <promotionList :dataConfig="promotionListConfig" @changeTab="changeTab" :tempArr="tempArr" :iSshowH="iSshowH"
                       @detail="goDetail"></promotionList>
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp();
import colors from "@/mixins/color";
import headerSerch from "@/components/headerSerch/headerSerch.vue";
import skeleton from "@/components/skeleton/skeleton.vue";
import swiperBg from "@/components/swiperBg/swiperBg.vue";
import menus from "@/components/menus/menus.vue";
import activeParty from "@/components/activeParty/activeParty.vue";
import promotionList from "@/components/promotionList/promotionList.vue";

import {
  goShopDetail
} from '@/libs/order.js';
import {
  getGroomList,
} from '@/apis/store.js';
import {
  getTripList,
} from '@/apis/trip.js';

export default {
  mixins: [colors],
  components: {
    headerSerch,
    skeleton,
    swiperBg,
    menus,
    activeParty,
    promotionList
  },
  data() {
    return {
      swiperImgList: [],
      menuList: [],
      bgColor: '#f5f5f5',
      bgPic: '',
      bgTabVal: 0,
      windowHeight: 0,
      showSkeleton: false,
      isSortType: 0,
      numConfig: 6,
      iSshowH: false,
      tempArr: [],
      headerSerchConfig: {
        id: "id1737340651703000",
        name: "headerSerch",
        bgColor: {
          name: "bgColor",
          title: "背景颜色(渐变)",
          default: [
            "#F62C2C",
            "#F96E29"
          ],
          color: [
            {item: "rgba(29, 176, 252, 1)"},
            {item: "rgba(29, 176, 252, 1)"},
          ]
        },
        boxStyle: {
          name: "boxStyle",
          title: "边框样式",
          list: [{icon: "iconPic_fillet", val: "圆角"}, {icon: "iconPic_square", val: "直角"}],
          type: 0
        },
        hotWords: {
          list: [
            {val: "CRMEB电商系统"},
            {val: "高品质高性能"},
            {val: "树立行业标杆"}
          ]
        },
        logoConfig: {
          header: "",
          title: "",
          type: 1,
          url: "http://crmeb.shop.com/uploads/attach/2023/02/20230210/955c6bb44d8e002164bcbc2e7b3b6ea5.png"
        },
        mbConfig: {
          min: 0,
          title: "页面间距",
          val: 0
        },
        prConfig: {
          min: 0,
          title: "背景边距",
          val: 10
        },
        setUp: {
          tabVal: 0
        },
        timestamp: 1737340651703000,
        txtStyle: {
          list: [{icon: "icondoc_left", val: "居左"}, {icon: "icondoc_center", val: "居中"}],
          name: "txtStyle",
          title: "文本位置",
          type: 0,
        }
      },
      swiperBgConfig: {
        name: "swiperBg",
        timestamp: 1737340651703001,
        setUp: {
          tabVal: 0
        },
        swiperConfig: {
          title: "最多可添加10张图片，建议宽度750px；鼠标拖拽左侧圆点可调整图片 顺序",
          maxList: 10,
          list: [
            {
              img: "http://crmeb.shop.com/uploads/attach/2023/02/20230213/62c718b8f546c0e601fbc00b63e63be2.jpeg",
              info: [
                {
                  title: "标题",
                  value: "今日推荐",
                  tips: "选填，不超过4个字",
                  max: 4
                },
                {
                  title: "链接",
                  value: "",
                  tips: "请输入链接",
                  max: 100
                }
              ]
            },
            {
              img: "http://crmeb.shop.com/uploads/attach/2023/02/20230215/744211aa7990da47780ac48f4a85e705.png",
              info: [
                {
                  title: "标题",
                  value: "",
                  tips: "选填，不超过4个字",
                  max: 4
                },
                {
                  title: "链接",
                  value: "",
                  tips: "请输入链接",
                  max: 100
                }
              ]
            }
          ]
        },
        isShow: {
          title: "是否显示背景色",
          val: 0
        },
        bgColor: {
          title: "背景颜色(渐变)",
          default: [
            {
              item: "#F62C2C"
            },
            {
              item: "#F96E29"
            }
          ],
          color: [
            {
              item: "transparent"
            },
            {
              item: "rgba(29, 176, 252, 1)"
            }
          ]
        },
        dotColor: {
          title: "指示器颜色",
          default: [
            {
              item: "#fff"
            }
          ],
          color: [
            {
              item: "#fff"
            }
          ]
        },
        lrConfig: {
          title: "左右边距",
          val: 10,
          min: 0
        },
        mbConfig: {
          title: "页面间距",
          val: 0,
          min: 0
        },
        docConfig: {
          cname: "swiper",
          title: "指示器样式",
          type: 0,
          list: [
            {
              val: "圆形",
              icon: "iconDot"
            },
            {
              val: "直线",
              icon: "iconSquarepoint"
            },
            {
              val: "数字",
              icon: "iconshuzi"
            },
            {
              val: "无指示器",
              icon: "iconjinyong"
            }
          ]
        },
        txtStyle: {
          title: "指示器位置",
          type: 0,
          list: [
            {
              val: "居左",
              icon: "icondoc_left"
            },
            {
              val: "居中",
              icon: "icondoc_center"
            },
            {
              val: "居右",
              icon: "icondoc_right"
            }
          ]
        },
        imgConfig: {
          cname: "docStyle",
          title: "轮播图样式",
          type: 0,
          list: [
            {
              val: "圆角",
              icon: "iconPic_fillet"
            },
            {
              val: "直角",
              icon: "iconPic_square"
            }
          ]
        },
        id: "id1737340651703001"
      },
      menusConfig: {
        name: "menus",
        timestamp: "1691119850468002",
        setUp: {
          tabVal: 0
        },
        tabConfig: {
          title: "展示样式",
          tabVal: 1,
          type: 1,
          tabList: [
            {
              name: "单行展示",
              icon: "icondanhang"
            },
            {
              name: "多行展示",
              icon: "iconduohang"
            }
          ]
        },
        rowsNum: {
          title: "显示行数",
          name: "rowsNum",
          type: 0,
          list: [
            {
              val: "2行",
              icon: "icon2hang"
            },
            {
              val: "3行",
              icon: "icon3hang"
            },
            {
              val: "4行",
              icon: "icon4hang"
            }
          ]
        },
        menuStyle: {
          title: "图标样式",
          name: "menuStyle",
          type: 1,
          list: [
            {
              val: "方形",
              icon: "iconPic_square"
            },
            {
              val: "圆形",
              icon: "icondayuanjiao"
            }
          ]
        },
        number: {
          title: "显示个数",
          name: "number",
          type: 1,
          list: [
            {
              val: "3个",
              icon: "icon3ge"
            },
            {
              val: "4个",
              icon: "icon4ge1"
            },
            {
              val: "5个",
              icon: "icon5ge1"
            }
          ]
        },
        pointerStyle: {
          title: "指示器样式",
          name: "pointerStyle",
          type: 2,
          list: [
            {
              val: "长条",
              icon: "iconSquarepoint"
            },
            {
              val: "圆形",
              icon: "iconDot"
            },
            {
              val: "无指示器",
              icon: "iconjinyong"
            }
          ]
        },
        bgStyle: {
          title: "背景样式",
          name: "bgStyle",
          type: 0,
          list: [
            {
              val: "直角",
              icon: "iconPic_square"
            },
            {
              val: "圆角",
              icon: "iconPic_fillet"
            }
          ]
        },
        prConfig: {
          title: "背景边距",
          val: 0,
          min: 0
        },
        menuConfig: {
          title: "最多可添加1张图片，建议宽度90 * 90px",
          maxList: 100,
          list: [
            {
              img: "http://www.jingbeilx.com/uploads/attach/2023/08/20230813/cd2252f7eb6db67625920386bddadd3b.jpg",
              info: [
                {
                  title: "标题",
                  value: "去旅行",
                  tips: "选填，不超过4个字",
                  max: 4
                },
                {
                  title: "链接",
                  value: "/pages/goods_cate/goods_cate",
                  tips: "请输入链接",
                  max: 100
                }
              ]
            },
            {
              img: "https://www.jingbeilx.com/uploads/attach/2024/04/20240407/bae87caaf74e329f27fb5e9752bbb026.jpg",
              info: [
                {
                  title: "标题",
                  value: "京郊露营",
                  tips: "选填，不超过4个字",
                  max: 4
                },
                {
                  title: "链接",
                  value: "/pages/goods/goods_list/index?cid=3&title=京郊露营",
                  tips: "请输入链接",
                  max: 100
                }
              ]
            },
            {
              img: "http://www.jingbeilx.com/uploads/attach/2023/08/20230813/07f668e49cfb81e4928a94500de08366.jpg",
              info: [
                {
                  title: "标题",
                  value: "亲子旅行",
                  tips: "选填，不超过4个字",
                  max: 4
                },
                {
                  title: "链接",
                  value: "/pages/goods/goods_list/index?sid=54&title=亲子旅行",
                  tips: "请输入链接",
                  max: 100
                }
              ]
            },
            {
              img: "https://www.jingbeilx.com/uploads/attach/2024/04/20240407/c38dfa2aec9261b3e86907f6bba426fd.jpg",
              info: [
                {
                  title: "标题",
                  value: "自驾游",
                  tips: "选填，不超过4个字",
                  max: 4
                },
                {
                  title: "链接",
                  value: "/pages/goods/goods_list/index?sid=43&title=自驾游",
                  tips: "请输入链接",
                  max: 100
                }
              ]
            }
          ]
        },
        pointerColor: {
          title: "指示器颜色",
          name: "pointerColor",
          default: [
            {
              item: "#f44"
            }
          ],
          color: [
            {
              item: "#f44"
            }
          ]
        },
        bgColor: {
          title: "背景颜色",
          name: "bgColor",
          default: [
            {
              item: "#fff"
            }
          ],
          color: [
            {
              item: "#fff"
            }
          ]
        },
        titleColor: {
          title: "文字颜色",
          name: "themeColor",
          default: [
            {
              item: "#333333"
            }
          ],
          color: [
            {
              item: "#333333"
            }
          ]
        },
        mbConfig: {
          title: "页面间距",
          val: 0,
          min: 0
        },
        id: "id1691119850468002"
      },
      activePartyConfig: {
        name: "activeParty",
        timestamp: 1737340651703004,
        setUp: {
          tabVal: 1
        },
        titleConfig: {
          title: "促销标题",
          value: "精品爆款",
          place: "请输入标题",
          max: 10
        },
        desConfig: {
          title: "促销简介",
          value: "美好生活由此开始",
          place: "请输入简介",
          max: 8
        },
        menuConfig: {
          title: "最多可添加4个版块，图片建议尺寸140 * 140px；鼠标拖拽左侧圆点可 调整版块顺序",
          maxList: 4,
          list: [
            {
              img: "http://crmeb.shop.com/uploads/attach/2023/02/20230213/a7cfed80049c0d051988da434d5553b6.jpg",
              info: [
                {
                  title: "标题",
                  value: "好友拼团",
                  tips: "选填，不超过4个字",
                  max: 4
                },
                {
                  title: "简介",
                  value: "店主诚意推荐 品质商品",
                  tips: "选填，不超过20个字",
                  max: 20
                },
                {
                  title: "链接",
                  value: "/pages/activity/goods_combination/index",
                  tips: "请输入链接",
                  max: 100
                }
              ]
            },
            {
              img: "http://crmeb.shop.com/uploads/attach/2023/02/20230213/afebd475d8c9c75ec8661504abf1c3b8.jpg",
              info: [
                {
                  title: "标题",
                  value: "限时秒杀",
                  tips: "选填，不超过4个字",
                  max: 4
                },
                {
                  title: "简介",
                  value: "店主诚意推荐 品质商品",
                  tips: "选填，不超过20个字",
                  max: 20
                },
                {
                  title: "链接",
                  value: "/pages/activity/goods_seckill/index",
                  tips: "请输入链接",
                  max: 100
                }
              ]
            },
            {
              img: "http://crmeb.shop.com/uploads/attach/2023/02/20230213/cf5414089d598d064b0a4d7154a4f491.png",
              info: [
                {
                  title: "标题",
                  value: "好友砍价",
                  tips: "选填，不超过4个字",
                  max: 4
                },
                {
                  title: "简介",
                  value: "新品上架等 你来拿",
                  tips: "选填，不超过20个字",
                  max: 20
                },
                {
                  title: "链接",
                  value: "/pages/activity/goods_bargain/index",
                  tips: "请输入链接",
                  max: 100
                }
              ]
            },
            {
              img: "http://crmeb.shop.com/uploads/attach/2023/02/20230213/5aea4687e62d39793ba63161eacf6661.jpg",
              info: [
                {
                  title: "标题",
                  value: "预售商品",
                  tips: "选填，不超过4个字",
                  max: 4
                },
                {
                  title: "简介",
                  value: "综合评选好 产品",
                  tips: "选填，不超过20个字",
                  max: 20
                },
                {
                  title: "链接",
                  value: "/pages/activity/presell/index",
                  tips: "请输入链接",
                  max: 100
                }
              ]
            }
          ]
        },
        themeColor: {
          title: "主题颜色",
          name: "themeColor",
          default: [
            {
              item: "#fc3c3e"
            }
          ],
          color: [
            {
              item: "#fc3c3e"
            }
          ]
        },
        bgColor: {
          title: "标签背景颜色",
          name: "bgColor",
          default: [
            {
              item: "#F62C2C"
            },
            {
              item: "#F96E29"
            }
          ],
          color: [
            {
              item: "#F62C2C"
            },
            {
              item: "#F96E29"
            }
          ]
        },
        boxColor: {
          title: "背景颜色",
          name: "boxColor",
          default: [
            {
              item: "#ffe5e3"
            }
          ],
          color: [
            {
              item: "#ffe5e3"
            }
          ]
        },
        mbConfig: {
          title: "页面间距",
          val: 10,
          min: 0
        },
        id: "id1737340651703004"
      },
      promotionListConfig: {
        name: "promotionList",
        timestamp: 1737340651703005,
        setUp: {
          tabVal: 1
        },
        productList: {
          title: "促销列表"
        },
        titleConfig: {
          title: "标题位置",
          type: 0,
          list: [
            {
              val: "居左",
              icon: "icondoc_left"
            },
            {
              val: "居中",
              icon: "icondoc_center"
            },
            {
              val: "居右",
              icon: "icondoc_right"
            }
          ]
        },
        titleShow: {
          title: "是否显示商品名称",
          val: "1"
        },
        opriceShow: {
          title: "是否显示商品原价",
          val: "1"
        },
        priceShow: {
          title: "是否显示商品价格",
          val: "1"
        },
        couponShow: {
          title: "是否显示优惠券",
          val: "1"
        },
        tabConfig: {
          title: "最多可添加4个版块；鼠标拖拽左侧圆点可调整版块顺序",
          max: 4,
          tabCur: 3,
          list: [
            {
              chiild: [
                {
                  title: "标题",
                  val: "首发新品",
                  max: 4,
                  pla: "选填，不超过四个字"
                },
                {
                  title: "简介",
                  val: "最新出炉",
                  max: 4,
                  pla: "选填，不超过四个字"
                }
              ],
              link: {
                title: "链接",
                activeVal: 1,
                optiops: [
                  {
                    type: 0,
                    value: 1,
                    label: "精品推荐"
                  },
                  {
                    type: 1,
                    value: 2,
                    label: "热门榜单"
                  },
                  {
                    type: 2,
                    value: 3,
                    label: "首发新品"
                  },
                  {
                    type: 3,
                    value: 4,
                    label: "促销单品"
                  }
                ]
              }
            },
            {
              chiild: [
                {
                  title: "标题",
                  val: "热门推荐",
                  max: 4,
                  pla: "选填，不超过四个字"
                },
                {
                  title: "简介",
                  val: "最新出炉",
                  max: 4,
                  pla: "选填，不超过四个字"
                }
              ],
              link: {
                title: "链接",
                activeVal: 1,
                optiops: [
                  {
                    type: 0,
                    value: 1,
                    label: "精品推荐"
                  },
                  {
                    type: 1,
                    value: 2,
                    label: "热门榜单"
                  },
                  {
                    type: 2,
                    value: 3,
                    label: "首发新品"
                  },
                  {
                    type: 3,
                    value: 4,
                    label: "促销单品"
                  }
                ]
              }
            },
            {
              chiild: [
                {
                  title: "标题",
                  val: "降价排行",
                  max: 4,
                  pla: "选填，不超过四个字"
                },
                {
                  title: "简介",
                  val: "最新出炉",
                  max: 4,
                  pla: "选填，不超过四个字"
                }
              ],
              link: {
                title: "链接",
                activeVal: 1,
                optiops: [
                  {
                    type: 0,
                    value: 1,
                    label: "精品推荐"
                  },
                  {
                    type: 1,
                    value: 2,
                    label: "热门榜单"
                  },
                  {
                    type: 2,
                    value: 3,
                    label: "首发新品"
                  },
                  {
                    type: 3,
                    value: 4,
                    label: "促销单品"
                  }
                ]
              }
            },
            {
              chiild: [
                {
                  title: "标题",
                  val: "限时折扣",
                  max: 4,
                  pla: "选填，不超过四个字"
                },
                {
                  title: "简介",
                  val: "最新出炉",
                  max: 4,
                  pla: "选填，不超过四个字"
                }
              ],
              link: {
                title: "链接",
                activeVal: 1,
                optiops: [
                  {
                    type: 0,
                    value: 1,
                    label: "精品推荐"
                  },
                  {
                    type: 1,
                    value: 2,
                    label: "热门榜单"
                  },
                  {
                    type: 2,
                    value: 3,
                    label: "首发新品"
                  },
                  {
                    type: 3,
                    value: 4,
                    label: "促销单品"
                  }
                ]
              }
            }
          ]
        },
        themeColor: {
          title: "主题风格",
          name: "themeColor",
          default: [
            {
              item: "#F95429"
            }
          ],
          color: [
            {
              item: "rgba(29, 176, 252, 1)"
            }
          ]
        },
        fontColor: {
          title: "价格颜色",
          name: "fontColor",
          default: [
            {
              item: "#e93323"
            }
          ],
          color: [
            {
              item: "#e93323"
            }
          ]
        },
        labelColor: {
          title: "活动标签",
          name: "labelColor",
          default: [
            {
              item: "#e93323"
            }
          ],
          color: [
            {
              item: "#e93323"
            }
          ]
        },
        mbConfig: {
          title: "页面间距",
          val: 0,
          min: 0
        },
        numConfig: {
          val: 6
        },
        id: "id1737340651703005"
      }
    }
  },
  created() {
    this.getSwperList()
    this.getTripList()
  },
  methods: {
    getSwperList() {
      let that = this;
      getGroomList().then((res) => {
        let data = res.data;
        that.swiperImgList = data.banner;
        that.menuList = data.nav;
      });
    },
    getTripList() {
      let that = this;
      getTripList().then((res) => {
        let data = res.data;
        that.tempArr = data.trip
      })
    },
    goDetail(item) {
      goShopDetail(item, this.$store.state.app.uid).then(res => {
        uni.navigateTo({
          url: `/pages/goods_details/index?id=${item.trip_id}`
        });
      });
    },
    // async getSwperList() {
    //   let res = await getGroomList();
    //   this.swiperImgList = res.data.banner
    //   this.menuList = res.data.menu_list
    // }
  },
  // 滚动监听
  onPageScroll(e) {
    // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
    uni.$emit('scroll');
  },
}
</script>

<style lang="scss" scoped>
.pictrue_log_class {
  background-color: var(--view-theme);
}

.page {
  padding-bottom: 50px;
}

.ysize {
  background-size: 100%;
}

.fullsize {
  background-size: 100% 100%;
}

.repeat {
  background-repeat: repeat;
}

.noRepeat {
  background-repeat: no-repeat;
}

.privacy-wrapper {
  z-index: 999;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #7F7F7F;


  .privacy-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 560rpx;
    padding: 50rpx 45rpx 0;
    background: #fff;
    border-radius: 20rpx;

    .title {
      text-align: center;
      font-size: 32rpx;
      text-align: center;
      color: #333;
      font-weight: 700;
    }

    .content {
      margin-top: 20rpx;
      line-height: 1.5;
      font-size: 26rpx;
      color: #666;

      navigator {
        display: inline-block;
        color: #E93323;
      }
    }

    .btn-box {
      margin-top: 40rpx;
      text-align: center;
      font-size: 30rpx;

      .btn-item {
        height: 82rpx;
        line-height: 82rpx;
        background: linear-gradient(90deg, #F67A38 0%, #F11B09 100%);
        color: #fff;
        border-radius: 41rpx;
      }

      .btn {
        padding: 30rpx 0;
      }
    }
  }
}

.error-network {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 40rpx;
  background: #fff;

  image {
    width: 414rpx;
    height: 336rpx;
  }

  .title {
    position: relative;
    top: -40rpx;
    font-size: 32rpx;
    color: #666;
  }

  .con {
    font-size: 24rpx;
    color: #999;

    .label {
      margin-bottom: 20rpx;
    }

    .item {
      margin-bottom: 20rpx;
    }
  }

  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 508rpx;
    height: 86rpx;
    margin-top: 100rpx;
    border: 1px solid #D74432;
    color: #E93323;
    font-size: 30rpx;
    border-radius: 120rpx;
  }
}

.sort-product {
  margin-top: 20rpx;

  .sort-box {
    display: flex;
    width: 100%;
    border-radius: 16rpx;
    padding: 30rpx 0;

    .sort-item {
      width: 20%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;

      image {
        width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
      }

      .txt {
        color: #272727;
        font-size: 24rpx;
        margin-top: 10rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 140rpx;
        text-align: center;
      }

      .pictrues {
        width: 90rpx;
        height: 90rpx;
        background: #f8f8f8;
        border-radius: 50%;
        margin: 0 auto;
      }

      .icon-gengduo1 {
        color: #333;
      }

      &.on {
        .txt {
          color: #fc4141;
        }

        image {
          border: 1px solid #fc4141;
        }
      }
    }
  }

  .product-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30rpx;
    padding: 0 20rpx;

    .product-item {
      position: relative;
      width: 344rpx;
      background: #fff;
      border-radius: 10rpx;
      margin-bottom: 20rpx;
      display: flex;
      flex-direction: column;

      image {
        width: 100%;
        height: 344rpx;
        border-radius: 10rpx 10rpx 0 0;
      }

      .info {
        flex: 1;
        padding: 14rpx 16rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
          font-size: 28rpx;
        }

        .price-box {
          font-size: 34rpx;
          font-weight: 700;
          margin-top: 8px;
          color: #fc4141;

          text {
            font-size: 26rpx;
          }
        }
      }
    }
  }
}

.emptyBox {
  text-align: center;
  padding-top: 20rpx;

  .tips {
    color: #aaa;
    font-size: 26rpx;
    padding-bottom: 20rpx;
  }

  image {
    width: 414rpx;
    height: 304rpx;
  }
}

.site-config {
  margin-top: 40rpx;
  font-size: 24rpx;
  text-align: center;
  color: #666;

  &.fixed {
    position: fixed;
    bottom: 69px;
    left: 0;
    width: 100%;
  }
}
</style>
